<template>
  <div class="hourglass" :style="style">
    <div class="up"></div>
    <div class="down"></div>
</div>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
  color: {
    type: Array,
  },
});

const style = computed(() => {
  return {
    "--up-color": `linear-gradient(to bottom, ${props.color[0]}, ${props.color[1]})`,
    "--down-color": `linear-gradient(to top, ${props.color[0]}, ${props.color[1]})`,
  };
});
</script>
<style>
.hourglass {
  height: var(--panel-height);
  width: var(--panel-width);
}

.up,
.down {
  height: 50%;
  width: 100%;
  transition: background 300ms;
  --radius: var(--panel-height);
}

.up {
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--up-color);
}

.down {
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--down-color);
  margin-top: -2px;
}
</style>
